import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const LessonAnalysis = () => {
  const [data, setData] = useState([
    {
      grade: '1-1',
      type: '优秀',
      value: 1,
    },
    {
      grade: '1-1',
      type: '良好',
      value: 9,
    },
    {
      grade: '1-1',
      type: '及格',
      value: 4,
    },
    {
      grade: '1-1',
      type: '不及格',
      value: 9,
    },
    {
      grade: '1-2',
      type: '优秀',
      value: 5,
    },
    {
      grade: '1-2',
      type: '良好',
      value: 9,
    },
    {
      grade: '1-2',
      type: '及格',
      value: 9,
    },
    {
      grade: '1-2',
      type: '不及格',
      value: 2,
    },
    {
      grade: '2-1',
      type: '优秀',
      value: 3,
    },
    {
      grade: '2-1',
      type: '良好',
      value: 7,
    },
    {
      grade: '2-1',
      type: '及格',
      value: 8,
    },
    {
      grade: '2-1',
      type: '不及格',
      value: 7,
    },
    {
      grade: '2-2',
      type: '优秀',
      value: 9,
    },
    {
      grade: '2-2',
      type: '良好',
      value: 3,
    },
    {
      grade: '2-2',
      type: '及格',
      value: 9,
    },
    {
      grade: '2-2',
      type: '不及格',
      value: 5,
    },
    {
      grade: '3-1',
      type: '优秀',
      value: 9,
    },
    {
      grade: '3-1',
      type: '良好',
      value: 5,
    },
    {
      grade: '3-1',
      type: '及格',
      value: 9,
    },
    {
      grade: '3-1',
      type: '不及格',
      value: 3,
    },
    {
      grade: '3-2',
      type: '优秀',
      value: 9,
    },
    {
      grade: '3-2',
      type: '良好',
      value: 5,
    },
    {
      grade: '3-2',
      type: '及格',
      value: 7,
    },
    {
      grade: '3-2',
      type: '不及格',
      value: 9,
    },
    {
      grade: '4-1',
      type: '优秀',
      value: 2,
    },
    {
      grade: '4-1',
      type: '良好',
      value: 9,
    },
    {
      grade: '4-1',
      type: '及格',
      value: 7,
    },
    {
      grade: '4-1',
      type: '不及格',
      value: 9,
    },
    {
      grade: '4-2',
      type: '优秀',
      value: 6,
    },
    {
      grade: '4-2',
      type: '良好',
      value: 9,
    },
    {
      grade: '4-2',
      type: '及格',
      value: 4,
    },
    {
      grade: '4-2',
      type: '不及格',
      value: 9,
    },
  ]);

  useEffect(() => {}, []);

  const config = {
    data,
    isStack: true,
    xField: 'grade',
    yField: 'value',
    seriesField: 'type',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'bottom', 'middle'
    },
    interactions: [
      {
        type: 'active-region',
        enable: false,
      },
    ],
    connectedArea: {
      style: (oldStyle, element) => {
        return {
          fill: 'rgba(0,0,0,0.25)',
          stroke: oldStyle.fill,
          lineWidth: 0.5,
        };
      },
    },
  };

  return <Column {...config} />;
};

export default LessonAnalysis;
